<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排行榜 - Online Judge</title>
    <link rel="stylesheet" href="/css/ranking.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <h1>📚 Online Judge</h1>
        <div class="nav-links">
            <a href="/all_questions">题目列表</a>
            <a href="/ranking.html">排行榜</a>
        </div>
        <div class="user-info" id="userInfo" style="display: none;">
            <span>欢迎，<span class="username" id="navUsername"></span></span>
            <a href="/user.html">我的主页</a>
            <button onclick="logout()">登出</button>
        </div>
        <div id="loginLink">
            <a href="/login.html">登录</a>
        </div>
    </nav>

    <!-- 排行榜容器 -->
    <div class="container">
        <h2>🏆 用户排行榜</h2>
        <p style="color: #666; margin-bottom: 20px;">按通过题目数量排名，通过数相同时按提交次数升序排列</p>
        
        <div id="rankingContent">
            <p>加载中...</p>
        </div>
    </div>

    <script src="/js/auth.js"></script>
    <script>
        // 加载排行榜数据
        async function loadRanking() {
            try {
                // 调用后端排行榜API，获取前100名
                const response = await fetch(`${API_BASE}/ranking?limit=100`);
                const result = await response.json();
                
                if (result.status === 0 && result.ranking) {
                    displayRanking(result.ranking);
                } else {
                    document.getElementById('rankingContent').innerHTML = 
                        '<p style="color: red;">加载排行榜失败</p>';
                }
            } catch (error) {
                console.error('Load ranking error:', error);
                document.getElementById('rankingContent').innerHTML = 
                    '<p style="color: red;">网络错误，请刷新重试</p>';
            }
        }

        // 显示排行榜数据
        function displayRanking(ranking) {
            if (ranking.length === 0) {
                document.getElementById('rankingContent').innerHTML = 
                    '<p>暂无排名数据</p>';
                return;
            }

            // 构建表格HTML
            let html = `
                <table class="ranking-table">
                    <thead>
                        <tr>
                            <th>排名</th>
                            <th>用户名</th>
                            <th>通过数</th>
                            <th>提交数</th>
                            <th>通过率</th>
                        </tr>
                    </thead>
                    <tbody>
            `;

            ranking.forEach((user, index) => {
                // 前三名显示奖牌
                let rankDisplay = user.rank;
                if (user.rank === 1) rankDisplay = '🥇';
                else if (user.rank === 2) rankDisplay = '🥈';
                else if (user.rank === 3) rankDisplay = '🥉';

                // 计算通过率
                const acRate = user.total_submit > 0 
                    ? ((user.accepted_count / user.total_submit) * 100).toFixed(1)
                    : 0;

                // 高亮当前登录用户
                const isCurrentUser = isLoggedIn() && getUserInfo().user_id === user.user_id;
                const rowClass = isCurrentUser ? 'style="background: #ffffcc;"' : '';

                html += `
                    <tr ${rowClass}>
                        <td class="rank-medal">${rankDisplay}</td>
                        <td><strong>${user.username}</strong></td>
                        <td>${user.accepted_count}</td>
                        <td>${user.total_submit}</td>
                        <td>${acRate}%</td>
                    </tr>
                `;
            });

            html += `
                    </tbody>
                </table>
            `;

            document.getElementById('rankingContent').innerHTML = html;
        }

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', () => {
            loadRanking();
        });
    </script>
</body>
</html>